import React, { useState } from 'react';
import { View, TextInput, TouchableOpacity, StyleSheet, Text, ToastAndroid , useColorScheme } from 'react-native';
import { useDispatch } from 'react-redux';
import { setLogin } from '../Store/actions';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useNavigation } from '@react-navigation/native';


const LoginForm = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [isLoggedIn, setIsLoggedIn] = useState(false); // 新增状态跟踪登录状态
  const dispatch = useDispatch();
  const colorScheme = useColorScheme();
  const isDarkMode = colorScheme === 'dark';
  const navigation = useNavigation();

  const RouteToProfile = () => {
    navigation.navigate('TabNavigator', { screen: 'Profile' });
  };

  const handleLogin = async () => {
    if (username && password) {
      const userInfo = {
        name: username,
        avatar: 'mock-avatar-url',
        token: 'mock-token',
      };
      dispatch(setLogin(true, userInfo));
      await AsyncStorage.setItem('loginState',
        JSON.stringify({
          isLogin: true,
          userInfo,
        })
      );
      setIsLoggedIn(true); // 设置登录状态为 true
      RouteToProfile();
    } else {
      ToastAndroid.show('请输入用户名和密码', ToastAndroid.SHORT);
    }
  };

  const themeStyles = {
    container: {
      backgroundColor: isDarkMode ? '#121212' : '#fff',
    },
    label: {
      color: isDarkMode ? '#FFFFFF' : '#000000',
    },
    input: {
      borderColor: isDarkMode ? '#333333' : '#ccc',
      color: isDarkMode ? '#FFFFFF' : '#000000',
      placeholderTextColor: isDarkMode ? '#AAAAAA' : '#999',
    },
    button: {
      backgroundColor: isDarkMode? '#007AFF' : '#007AFF',
    }
  };

  if (isLoggedIn) {
    return (
      <View style={[styles.container, themeStyles.container]}>
        <Text style={[styles.TipLabel, themeStyles.label]}>登录成功!</Text>
        <Text style={[styles.TipLabel, themeStyles.label]}>请点击其他区域继续</Text>
      </View>
    );
  }

  return (
    <View style={[styles.container, themeStyles.container]}>
      <Text style={[styles.label, themeStyles.label]}>用户名</Text>
      <TextInput
        style={[styles.input, themeStyles.input]}
        placeholder="请输入用户名"
        value={username}
        onChangeText={setUsername}
      />
      <Text style={[styles.label, themeStyles.label]}>密码</Text>
      <TextInput
        style={[styles.input, themeStyles.input]}
        placeholder="请输入密码"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
      />
      <TouchableOpacity style={[styles.loginButton,themeStyles.button]} activeOpacity={0.2} onPress={handleLogin}>
        <Text style={{ color: '#fff',textAlign:'center',fontSize: 18, }}>登录/注册</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },
  label: {
    fontSize: 16,
    marginBottom: 8,
  },
  TipLabel: {
    fontSize: 28,
    marginBottom: 8,
    textAlign: 'center' // 可以根据需要添加更多样式
  },
  input: {
    height: 40,
    borderWidth: 1,
    marginBottom: 16,
    paddingHorizontal: 8,
    borderRadius: 4,
    backgroundColor: '#222',
  },
  loginButton: {
    borderRadius: 10,
    paddingVertical: 10,
    
  }
});

export default LoginForm;
